// 通过映射设置CSS变量
@mixin set-css-var($variables, $name) {
	@each $attribute, $value in $variables {
		--#{$name}-#{$attribute}: #{$value};
	}
}

// 文本不换行
@mixin text-no-wrap() {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

// border
@mixin set-border-radius($types, $var) {
	@each $type in $types {
		border-#{$type}-radius: $var;
	}
}

@mixin set-border($direction, $var) {
	@each $item in $direction {
		border-#{$item}: $var;
	}
}

// 多行文本溢出
@mixin text-ellipsis($line: 2) {
	overflow: hidden;
	word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: $line;
	-webkit-box-orient: vertical;
}

@mixin scroll-bar {
	// 滚动条凹槽的颜色，还可以设置边框属性
	::-webkit-scrollbar-track-piece {
		background-color: #f8f8f8;
		border-radius: 12px;
		-webkit-border-radius: 12px;
	}
	// 滚动条的宽度
	::-webkit-scrollbar {
		width: 9px;
		height: 9px;
		border-radius: 12px;
		-webkit-border-radius: 12px;
	}
	// 滚动条的设置
	::-webkit-scrollbar-thumb {
		background-color: #dddddd;
		background-clip: padding-box;
		min-height: 28px;
		border-radius: 12px;
		-webkit-border-radius: 12px;
	}
	::-webkit-scrollbar-thumb:hover {
		background-color: #bbb;
	}
}

// 背景图片
@mixin bg-image($url) {
	background-image: url($url + ".png");
	@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
		background-image: url($url + "@2x.png");
	}
}
